<template>
  <div class="news">
    <div class="news-box">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/18ced7c50375c049d03df99b6ec4c99d.jpg"
        alt=""
      />
      <ul class="news-small">
        <Banners :banners="small"></Banners>
      </ul>
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c47f2d6ec4d1ebb1464d45af997a16d2.jpg?w=1080&h=91&bg=F2F2F2"
        alt=""
      />
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84a75ac726ec93a024699eddf710f4d3.jpg"
        alt=""
      />
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/269c344326f28a8e45599506f01b8a53.png"
        alt=""
      />
      <ul class="news-list">
        <li v-for="(item, index) in newsimg" :key="index">
          <img :src="item.imgsrc" alt="" />
        </li>
      </ul>
      <div class="news-boxs">
        <div class="boxs-top">
          <p>往期新品测试</p>
          <div>
            <img
              v-for="(item, index) in newsimgss"
              :key="index"
              :src="item.imgsrc"
              alt=""
            />
            <p>共20篇内容></p>
          </div>
        </div>
        <ul class="boxs-bottom">
          <li v-for="(item, index) in newsimgs" :key="index">
            <img class="imgs" :src="item.imgsrc" alt="" />
            <p class="li-p">{{ item.content }}</p>
            <div class="bottom-boxs">
              <div class="boxs-l">
                <img :src="item.imgsrcs" alt="" />
                <p>{{ item.name }}</p>
              </div>
              <div class="boxs-r">
                <div></div>
                <p>{{ item.num }}</p>
              </div>
            </div>
          </li>
          <li class="bottom-ck">查看更多></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import instance from "../../../api/request";
import Banners from "../Banners.vue";
export default {
  name: "News",
  data() {
    return {
      small: null,
      newsimg: null,
      newsimgs: null,
      newsimgss: null,
    };
  },
  methods: {
    async fn() {
      let { data } = await instance.get("index.json");
      let micircle = data.micircle;
      let newsmall = micircle.newsmall;
      this.small = newsmall.map((item) => {
        return item.imgsrc;
      });
      let newsimg = micircle.newsimg;
      this.newsimg = newsimg;
      let newsimgs = micircle.newsimgs;
      this.newsimgs = newsimgs;
      let newsimgss = micircle.newsimgss;
      this.newsimgss = newsimgss;
    },
  },
  created() {
    this.fn();
  },
  components: {
    Banners,
  },
};
</script>
<style scoped lang="less">
.news {
  width: 100%;
  max-width: 7.2rem;
  font-size: 0.2rem;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  .news-box {
    width: 4.8rem;
    margin: 0 auto;
    img {
      width: 100%;
      vertical-align: middle;
    }
    .news-list {
      display: flex;
    }
    .news-boxs {
      background: rgb(242, 242, 242);
      padding: 0.32rem 0.1rem;
      .boxs-top {
        margin-top: -0.32rem;
        height: 1.16rem;
        padding: 0 0.06rem;
        font-size: 0.32rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          width: 60%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: .2rem;
          color: rgb(92, 89, 112);
        }
        div {
          display: flex;
          align-items: center;
          img {
            width: 0.32rem;
            height: 0.32rem;
            border-radius: 50%;
            border: 1px solid #fff;
            overflow: hidden;
          }
          p {
            font-size: 0.2rem;
            margin-left: 0.1rem;
          }
        }
      }
      .boxs-bottom {
        display: flex;
        align-items: center;
        overflow-x: auto;
        flex-direction: row;
        li {
          margin-right: 0.12rem;
          flex-shrink: 0;
          width: 2rem;
          margin-right: 0.12rem;
          background: #fff;
          border-radius: 0.16rem;
          display: block;
          .imgs {
            margin: 0;
            width: 100%;
            height: 1.82rem;
            border-top-left-radius: 0.16rem;
            border-top-right-radius: 0.16rem;
          }
          .li-p {
            line-height: 1em;
            height: auto;
            padding-left: 0.24rem;
            white-space: nowrap;
            margin-top: 0.2rem;
            color: #000;
            text-overflow: ellipsis;
            font-size: .18rem;
            overflow: hidden;
          }
          .bottom-boxs {
            margin-top: 0.1rem;
            display: flex;
            height: 0.64rem;
            padding-left: 0.24rem;
            justify-content: space-between;
            .boxs-l {
              height: 0.64rem;
              font-size: 0.2rem;
              color: rgba(0, 0, 0, 0.5);
              display: flex;
              align-items: center;
              img {
                width: 0.36rem;
                height: 0.36rem;
                flex-shrink: 0;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 0.1rem;
              }
              p {
                width: 0.4rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 0.14rem;
              }
            }
            .boxs-r {
              display: flex;
              align-items: center;
              margin-right: 0.1rem;
              div {
                background: url()
                  no-repeat;
                width: 0.36rem;
                height: 0.36rem;
                background-size: 0.36rem 0.36rem;
              }
              p {
                font-size: 0.14rem;
                color: rgba(0, 0, 0, 0.5);
              }
            }
          }
        }
        .bottom-ck {
          display: flex;
          width: 0.28rem;
          background: #fff;
          height: 2.92rem;
          padding: 0 0.2rem;
          border-radius: 0.16rem;
          flex-direction: column;
          justify-content: center;
          font-size: 0.28rem;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}
</style>